<template>
  <div class="app-container">
    <h1 style="align-content: center">添加作品</h1>
    <el-steps :active="1" finish-status="success">
      <el-step title="填写作品基本信息"></el-step>
      <el-step title="添加章节规则"></el-step>
      <el-step title="上传完成"></el-step>
    </el-steps>

    <el-form label-width="120px" style="margin-top: 10px">
      <!--标题-->
      <el-form-item label="作品标题">
        <el-input placeholder="请填写作品标题" v-model="contentVO.title"/>
      </el-form-item>
      <!--分类 -->
      <el-form-item label="作品分类">
        <!--当绑定的数据发生改变，就会调用change的方法 并且会传入一个value值 为当前选择的key-->
        <el-select placeholder="一级分类" v-model="contentVO.categoryParentId" @change="oneCategoryChanged">
          <el-option v-for="oneCategory in oneCategoryList"
                     :key="oneCategory.id"
                     :label="oneCategory.title"
                     :value="oneCategory.id"/>
        </el-select>
        &nbsp;
        <el-select placeholder="二级分类" v-model="contentVO.categoryId">
          <el-option v-for="twoCategory in twoCategoryList"
                     :key="twoCategory.id"
                     :label="twoCategory.title"
                     :value="twoCategory.id"/>
        </el-select>
      </el-form-item>
      <!--作者-->
      <el-form-item label="作者">
        <el-select placeholder="选择作者" v-model="contentVO.authorId">
          <!--下拉列表框遍历 label 显示的内容
          value 绑定的数据-->
          <el-option v-for="author in authorList"
                     :key="author.id"
                     :label="author.name"
                     :value="author.id"
          />
        </el-select>
      </el-form-item>
      <!--总视频数-->
      <el-form-item label="总视频数" >
        <el-input :min="0" placeholder="总视频数" v-model="contentVO.contentNum"/>
      </el-form-item>
      <!--简介-->
      <el-form-item label="作品简介">
        <el-input placeholder="作品简介" v-model="contentVO.description"/>
      </el-form-item>
      <!--封面-->
      <el-form-item label="作品封面">
        <el-upload
          :show-file-list="false"
          :action="BASE_API+'/service_upload/file/ossUploadFile'"
          :on-success="uploadSuccess"
          :limit="1"
          name="file">

          <img :src="contentVO.cover" style="width: 300px; height: 150px"/>
        </el-upload>

      </el-form-item>

      <!--价格-->
      <el-form-item label="价格">
        <el-input :min="0" placeholder="价格" v-model="contentVO.price"/>
      </el-form-item>

      <el-button style="margin-top: 12px;" type="primary" @click="next">保存并下一步</el-button>

    </el-form>
  </div>
</template>

<script>
 //import tinymce from '@/components/Tinymce/tinymce'  引入组件失败
  import category from '@/api/video/category'
  import content from '@/api/video/content'
  export default {
   // components:{
     // 'tinymce': tinymce
   // },
    data() {
      return {
        active: 0,
        contentVO:{
          title:'', //标题
          categoryId:'', //二级分类ID
          categoryParentId:'', //一级分类ID
          authorId:'',  //作者id
          contentNum:'', //总视频数
          description:'',//简介
          cover:require('@/assets/cover.jpg'), //封面
          price:0
        },
        contentId:'',
        authorList:[],  //作者列表
        oneCategoryList:[],//一级分类列表
        twoCategoryList:[],//二级分类列表
        BASE_API:process.env.VUE_APP_BASE_API
      };
    },

    methods: {
      next() {
        if(this.contentId!==':id'){
          content.updateContent(this.contentVO).then(response=>{
            this.$message({
              type:'success',
              message:'信息修改成功'
            });
            this.$router.push({path:'/content/chapter/'+this.contentId})
          })
        }
        else{
          content.addContentInfo(this.contentVO).then(response=>{
            this.$message({
              type:'success',
              message:'信息上传成功'
            });
            this.contentId=response.data.id;
            //路由跳转
            this.$router.push({path:'/content/chapter/'+this.contentId})
          })
        }


      },
        getInfo(){
        content.getOneContent(this.contentId).then(response=>{
          this.contentVO=response.data.contentVo;
          //1.获取一级分类
          this.oneCategory();
          //遍历每一个一级分类 , 判断当前的contentVO 是属于哪一个一级分类
          for (var i = 0; i < this.oneCategoryList.length; i++){
            let oneCategory = this.oneCategoryList[i];
            if (oneCategory.id === this.contentVO.categoryParentId){
              this.twoCategoryList = oneCategory.children;
            }
          }
        });



      },
      getAllList()
      {
        content.getAuthorList().then(response=>{
          this.authorList=response.data.list;
        });
      },
      oneCategory(){
        category.getTreeModel().then(response=>{
          this.oneCategoryList=response.data.list;
        })
      },
      //当一级分类改变时调用的 方法  参数:当前一级分类选择的id
      oneCategoryChanged(value){
        for (var i = 0; i < this.oneCategoryList.length;i++){
          var category =  this.oneCategoryList[i];
          if (value === category.id){
            this.twoCategoryList = category.children;
            //清空已经选择的二级分类
            this.contentVO.categoryId = '';
          }
        }
      },

      uploadSuccess(response,file){
        this.contentVO.cover=response.data.url;
      }

    },
    created() {
      //判断路由当中有没有id 如果有 修改  做数据回显
      //获取路由当中的id

      if (this.$route.params && this.$route.params.id){
        this.contentId = this.$route.params.id;
        if(this.contentId!==':id')
        {
          this.getInfo();
        }
        //根据id查询当前的作品 回显

      }
        this.getAllList();
        this.oneCategory();

    }
  }
</script>

<style scoped>

</style>
